<template>
	<view class="container">
		<block v-for="(item,index) in userViews" :key="index">
			<tui-list-cell :unlined="false">
				<view class="tui-chat-item">
					<view class="tui-msg-box" @tap="jumpUserPage(item.id)">
						<!--头像-->
						<image :src="item.avatar" class="tui-msg-pic" mode="widthFix"></image>
						<view class="tui-msg-item">
							<view class="tui-msg-name">{{item.nickname}}</view><!--昵称-->
						</view>
					</view>
					<view class="tui-msg-right" v-if="loginUserId != item.id">
						<tui-button
						v-show="!item.isFollow"
						margin="0 10rpx 26rpx 0" type="black" shape="circle" width="120rpx" height="43rpx" :size="32" 
						@click="follow(item)">
							关注
						</tui-button>
						<tui-button
						v-show="item.isFollow" 
						plain margin="0 10rpx 26rpx 0" type="gray" shape="circle" width="120rpx" height="43rpx" :size="32" 
						@click="cancelFollow(item)">
							已关注
						</tui-button>
					</view>
				</view>
			</tui-list-cell>
		</block>
		<tui-nomore v-if="!allowLoading"></tui-nomore> <!--显示没有更多数据-->
	</view>
</template>


<script>
	import c from "@/utils/Constant.js"
	import userApi from "@/request/api/userApi.js"
	import followApi from "@/request/api/followApi.js"
	import userUtils from "@/utils/userUtils.js"
	import listUtils from "@/utils/ListUtils.js"
	const userPageUrl = "/pages/user/user"
	export default {
		data() {
			return {
				allowLoading:true,//是否允许加载，如果数据已经全部拉取完毕，就可以关闭了
				userViews:[
					// {
					// 	id:'',
					// 	nickname:"甘大佬",
					// 	avatar:"http://qrmtew1pg.hn-bkt.clouddn.com/upload/20210419/79f7afbe807b40c09bedcfdc0b08bdbb.jpeg",
					// 	isFollow:false
					// },
					// {
					// 	id:'',
					// 	nickname:"甘大佬2",
					// 	avatar:"http://qrmtew1pg.hn-bkt.clouddn.com/upload/20210419/79f7afbe807b40c09bedcfdc0b08bdbb.jpeg",
					// 	isFollow:true
					// }
				],
				userId:'',
				loginUserId:userUtils.getLoginUserId(),
				page:{
					current:1,
					size:10  
				},
				userIds:[],
				userInfos:[],
				followStatus:[]
			}
		},
		created() {
			this.asyncExec()
		},
		onLoad (options) {
			//获取其他页面带来的参数
			this.userId = options.id
		},
		watch:{
			userInfos(){ //监听集合，如果变化，更新UserViews
				this.formatToUserViews();
			},
			followStatus(){ //监听集合，如果变化，更新UserViews
				this.formatToUserViews();
			}
		},
		onReachBottom: function() {
			 this.asyncExec()
		},
		methods: {
			
			/* 思路：
			 *  1、拉取用户关注了的用户id集合
			 *  2、拉取用户列表信息
			 *  3、如果用户已登录，看登录用户是否已关注了关注列表的用户；如果没登录，那么就是都没关注
			 *  4、根据用户信息+关注状态，组装成 userView 
			 */
			async asyncExec(){
				//拉取用户关注了的用户id集合
				let followsResult = await followApi.listFollows(this.userId,this.page)
				if(followsResult.code == 0){
					this.userIds = [...this.userIds,...followsResult.page.list]
					if(followsResult.page.list.length < this.page.size){
						this.allowLoading = false;
					}
					this.page.current++		
				}
				//拉取用户列表信息
				this.getUserInfos(followsResult.page.list);
				//如果用户已登录，看登录用户是否已关注了关注列表的用户
				if(this.loginUserId !=null){
					this.getFollowStatus(followsResult.page.list);
				}	
			},	
			//拉取用户关注了的用户id集合
			
			//拉取用户列表信息
			getUserInfos(ids){
				userApi.batchUserBaseInfo(ids).then((data)=>{
					if(data.code == 0 && data.data){
						this.userInfos = [...this.userInfos,...data.data] 
					}
				})
				
			},
			//获取关注状态
			getFollowStatus(ids){
				followApi.batchQueryIsFollow(ids).then((data)=>{
					if(data.code == 0){
						this.followStatus =  [...this.followStatus,...data.data]
					}
				})
			},
			//关注用户
			follow(userView){
				userUtils.loginCheck();
				followApi.follow(userView.id).then((data)=>{
					if(data.code == 0 ){
						userView.isFollow = true;
					}
				})
			},
			//取消关注
			cancelFollow(userView){
				followApi.cancelFollow(userView.id).then((data)=>{
					if(data.code == 0 ){
						userView.isFollow = false;
					}
				})
			},
			formatToUserViews(){
				this.userViews = [];
				this.userInfos.forEach((userInfo)=>{
					this.userViews.push(this.formatToUserView(userInfo))
				})
			},
			//根据用户信息+关注状态，组装成 userView 
			formatToUserView(userInfo){
				let userView = {...userInfo}
				userView.isFollow = false;
				//如果用户关注状态集合为null,说明用户未登录，那么自然就是未关注
				if(this.followStatus == null){
					return userView;
				}
				//根据用户id，查找出对应的关注状态
				let status = listUtils.findElem(this.followStatus,"userId",userInfo.id)
				if(status == null){
					return userView;
				}
				userView.isFollow = status.status
				return userView;
			},
			
			//跳转用户个人页
			jumpUserPage(id){
				uni.navigateTo({
					url:userPageUrl+"?id="+id
				})
			},
			
		},
		
		onPullDownRefresh: function() {
			uni.stopPullDownRefresh();
		}
	}
	
</script>

<style>

	.container {
		padding-bottom: 100rpx
	}
	
	/*tabbar*/

	.tui-tabbar {
		width: 100%;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 99999;
		background-color: #fff;
		height: 100rpx;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}


	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d2d2d2;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-tabbar-item {
		flex: 1;
		width: 25%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		font-size: 24rpx;
		color: #666;
		height: 80rpx;
	}

	.tui-ptop-4 {
		padding-top: 4rpx;
	}

	.tui-scale {
		font-weight: bold;
		transform: scale(0.8);
		transform-origin: center 100%;
		line-height: 30rpx;
	}

	.tui-item-active {
		color: #00c0fb !important;
	}

	/*tabbar*/
	.tui-chat-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-msg-box {
		display: flex;
		align-items: center;
	}

	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
	}

	.tui-msg-item {
		max-width: 500rpx;
		min-height: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34rpx;
		line-height: 3;
		color: #262b3a;
	}


	.tui-msg-right {
		max-width: 120rpx;
		height: 88rpx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	}

	.tui-msg-right.tui-right-dot {
		height: 76rpx;
		padding-bottom: 10rpx;

	}

	
</style>
